<template>
  <div class="myQuery">

    <!--    轮播图-->
    <template class="lb">
      <div class="block" ref="carousel">
        <el-carousel height="500px" trigger="click" :interval="3000" arrow="always">
          <el-carousel-item v-for="banner in bannerList" :key="banner.id" class="swiper-slide"
                            style="background: #040B1B;">
            <a target="_blank" :href="banner.imageUrl">
              <img width="100%"
                   :src="banner.imageUrl"
                   :alt="banner.title"
                   style="height:100%; width:100%;"
              />
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
    <!--    下方布局-->
    <center><h2 style="color: #2a88d8">航班查询</h2></center>
    <div class="buju">
      <!--      条件盒子-->
      <div class="queryBox">
        <!--    航班查询类型-->
        <h3 class="head_text">我的航班查询</h3>
        <!--      根据航班号查询-->
        <template>
          <div class="planeId">
            <span class="text">航班号</span>
            <el-input v-model="queryPlaneVo.flightNumber" placeholder="航班号" style="width: 200px"></el-input>
          </div>
          <hr/>

        </template>
        <h3 class="head_text">当前航班查询</h3>
        <div class="query">
          <!--    航班类型选择-->
          <template>
            <div class="planeType">
              <span class="text">航班类型选择&nbsp;</span>
              <el-select v-model="queryPlaneVo.type"  placeholder="请选择">
                <!-- 下拉框列表内容-->
                <el-option
                  v-for="item in planeType"
                  :key="item.plane"
                  :label="item.plane"
                  :value="item.plane">
                </el-option>
              </el-select>

            </div>
          </template>
          <!--      出发地 目的地-->
          <div class="base">
            <template>
              <div class="addr">
                <span class="text"> 选择出发地&nbsp;&nbsp;&nbsp;</span>
                <el-select v-model="province" placeholder="请选择省份" style="width: 170px"
                           value-key="name"
                           @change="getAddr_city">
                  <el-option
                    v-for="item in address_province"
                    :key="item.code"
                    :label="item.name"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select
                  v-model="city"
                  collapse-tags
                  style="margin-left: 20px;width: 150px"
                  placeholder="请选择城市">
                  <el-option
                    v-for="item in address_city"
                    :key="item.value"
                    :value="item.name">
                  </el-option>
                </el-select>

                <span class="text"> 选择目的地</span>
                <el-select v-model="go_province" placeholder="请选择省份" value-key="name"
                           @change="getAddr_city"
                           style="width: 150px">
                  <el-option
                    v-for="item in go_address_province"
                    :key="item.code"
                    :label="item.name"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select
                  v-model="go_city"
                  collapse-tags
                  style="margin-left: 20px;width: 150px"
                  placeholder="请选择城市">
                  <el-option
                    v-for="item in go_address_city"
                    :key="item.value"
                    :value="item.name">
                  </el-option>
                </el-select>

              </div>

            </template>
          </div>
          <!--      出发日期-->
          <template>
            <div class="departure_date">
              <span class="demonstration">出发日期</span>
              <el-date-picker
                v-model="queryPlaneVo.startDateTime"
                type="date"
                placeholder="选择日期"
                style="width: 200px">
              </el-date-picker>
            </div>
          </template>

        </div>
        <hr/>

        <!--    价格&日期查询-->
        <h3 class="head_text">低价航班查询</h3>
        <div class="query_price_time">
          <!--      价格-->
          <template>
            <div class="price">
              <span class="text_price">价格区间</span>
              <el-slider
                class="bar"
                style="width: 300px"
                v-model="price"
                show-input
                range
                :max="10000"
                :step="1000"
                :min="0">
              </el-slider>
              <span class="price_text">{{ price }}</span>
            </div>
          </template>
          <!--      日期-->
          <template>
            <div class="departure_date">
              <span class="demonstration">出发日期</span>
              <el-date-picker
                v-model="queryPlaneVo.startDateTime"
                type="date"
                placeholder="选择日期"
                style="width: 200px">
              </el-date-picker>
            </div>
          </template>
        </div>
        <hr/>
      </div>
      <!--      搜索-->
      <div class="search_Box">
        <div class="des">
          <span class="des_text">
            <el-col :span="100">
    <el-card shadow="always">

            <span style="color: red">【温馨提示】</span><center>尊敬的旅客您好！您可以使用三种方式进行搜索</center>
            <span style="color: red">①</span>若您已订购票，再次查看,请直接输入您的航班号进行查询<br>
            <span style="color: red">②</span>若您尚未购票，欲检索当前机票情况,请使用当前航班查询<br>
            <span style="color: red">③</span>若您尚未购票，欲检索当前低价机票请,使用低价航班查询
    </el-card>
  </el-col>
          </span>
        </div>
        <div class="search_2">
          <el-image class="searchImg"
                    :src="require('@/assets/search.png')"
                    style="width: 150px;height: 150px"
                    @click="search()"
          >
          </el-image>
          <span class="search_text">查询</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import getAddrList from "../api/getAddrList";
import banner from "../api/banner";
import baseInfoList from "../api/baseInfoList";
import moment from 'moment'

export default {
  name: "index",
  data() {
    return {
      bannerList: {},
      //顾客类型
      mansOption: ['带婴儿', '带儿童'],
      //顾客类型库存
      mans: ['带婴儿', '带儿童'],
      //航班类型
      planeType: [
        {
          plane: '普通航班'
        },
        {
          plane: '转程航班'
        },
        {
          plane: '多程航班'
        }
      ],
      //出发省列表
      address_province: [],
      //出发市列表
      address_city: [],
      //到达省列表
      go_address_province: [],
      //达到市列表
      go_address_city: [],
      //出发选择的省
      province: '',
      //出发选择的市
      city: '',
      //出发选择的省
      go_province: '',
      //达到选择的市
      go_city: '',
      price: '',
      queryPlaneVo: {},

    }

  },

  created() {
    // this.hasSessionStorage()
    //加载省份
    this.getProvince()
    this.getBannerList()

  },
  methods: {
    /**
     *  用来转换数据
     */


    forTransformation() {
      //转换航班类型
      switch (this.queryPlaneVo.type) {
        case "普通航班":
          this.queryPlaneVo.type = "listBase"
          break;
        case "转程航班":
          this.queryPlaneVo.type = "transfer"
          break;
        case "多程航班":
          this.queryPlaneVo.type = "connecting"
          break;
        default:
          this.queryPlaneVo.type = "listBase"
          break;
      }

      //转换省+市格式
      if (this.province.name == null && this.go_province.name == null) {
        this.queryPlaneVo.startCity = undefined
        this.queryPlaneVo.endCity = undefined
      } else {
        this.queryPlaneVo.startCity = this.province.name + this.city
        this.queryPlaneVo.endCity = this.go_province.name + this.go_city
      }
      //  转换价格
      if (this.price[0] == 0 && this.price[1] == 10000) {
        this.queryPlaneVo.priceStart = undefined;
        this.queryPlaneVo.priceEnd = undefined;
      } else {
        this.queryPlaneVo.priceStart = this.price[0]
        this.queryPlaneVo.priceEnd = this.price[1]
      }
      //封装日期转换
      if (this.queryPlaneVo.startDateTime != null) {
        this.queryPlaneVo.startDateTime = moment(this.queryPlaneVo.startDateTime).format('yyyy-MM-DD')
      }
      if (this.queryPlaneVo.startDateTime == null) {
        this.queryPlaneVo.startDateTime = undefined
      }


    },
    //我的航班+当前航班可用
    search() {
      this.forTransformation()
      baseInfoList.getMyPlaneList(1, 999, this.queryPlaneVo)
        .then(result => {
          localStorage.setItem("planeList", JSON.stringify(result))
          // this.$router.push('/PlaneList')
          location.replace("/PlaneList")  //未能找到解决方法
          this.$notify({
            title: '成功',
            message: '查询成功跳转至航班列表',
            type: 'success',
            offset: 200 //通知位置偏移量
          });


        })
    },


    //查询首页轮播图
    getBannerList() {
      banner.findAllBanner()
        .then(response => {
          this.bannerList = response.data.data.bannerList
        })

    },
    //获得省份
    getProvince() {
      getAddrList.getProvince()
        .then(response => {
          //获得全部的省份
          this.address_province = response.data.data.province
          this.go_address_province = response.data.data.province
        })
    },
    //获得城市
    getAddr_city(e) {
      getAddrList.getProvince(e.code)
        .then(result => {
          //获取该省份下的市；如果没找到不是bug而是数据库没有 -----[~___~]----
          this.address_city = result.data.data.city
          this.go_address_city = result.data.data.city
        })
    },
  }

}
</script>

<style scoped>

.buju {

  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

.search_Box {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

}

.des {
  display: flex;
  flex-direction: row;
  justify-content: center;


}

.search_2 {
  margin-bottom: 80px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

/*这块别动！！！*/
.queryBox {
  display: inline;
}

.query {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
}

.planeType {
  width: 305px;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

}


.addr, .departure_date, .check, .planeId, .price, .planeType, .des_text {
  background: #fff;
  border: #dcdddd 1px solid;
  justify-content: center;
}

.departure_date {
  width: 305px;
  justify-content: flex-start;

}

.planeId {
  display: flex;
  align-items: center;
  width: 305px;
  height: 50px;
  justify-content: flex-start;
}

.addr, .price {
  width: 850px;
  height: 50px;
  display: inline-flex;
  border-radius: 4px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;

}

.price {
  width: 550px;
}


.query_price_time {
  display: inline-flex;
  flex-direction: column;
}

.text, .man_box, .demonstration, .text_price, .search_text {
  color: #000;
}

.text_price {
  margin-right: 40px;
}

.price_text {
  margin-left: -80px;
}

.departure_date {
  width: 305px;
  display: inline-flex;
  align-items: center;
  height: 50px;
  border-radius: 4px;
}

.check {
  height: 50px;
  width: 305px;
  border-radius: 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  margin-top: 10px;
}

.check:hover, .departure_date:hover, .addr:hover, .price:hover, .planeId:hover, .planeType:hover, .searchImg:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .32), 0 0 6px rgba(0, 0, 0, .1)
}

.man {
  font-size: 13px;
  color: #505458;
}

.man_box {
  font-size: 20px;
  display: inline-flex;
  flex-direction: row;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.departure_date {
  flex-wrap: wrap;
}

</style>
